<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /* 
            点击按钮后，将l1添加到list2中
        */
        window.addEventListener("DOMContentLoaded", function () {
            const list1 = document.getElementById("list1");
            const list2 = document.getElementById("list2");
            // const l1 = document.getElementById("l1");
            const btn01 = document.getElementById("btn01");
            btn01.onclick = function () {
                const li = list1.firstElementChild;
                if (li) {
                    const clone = li.cloneNode(true);
                    clone.removeAttribute("id"); // 避免多个相同 id
                    list2.appendChild(clone);
                }
                /* 
                    cloneNode(true) 创建的节点，是l1的副本
                        - 连id都会复制
                        - 可以传递一个参数，true表示复制所有属性，false表示不复制属性
                */
            };
        })
    </script>
</head>

<body>
    <button id="btn01">点我一下</button>

    <ul id="list1">
        <li id="l1">孙悟空</li>
        <li id="l2">猪八戒</li>
        <li id="l3">沙悟净</li>
    </ul>

    <ul id="list2">
        <li>蜘蛛精</li>
    </ul>
</body>

</html>